<template>
  <div class="about">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1"/>
      <div class="to_do_container">
        <div class="to_do_container_item" v-for="(item,index) in this.$store.state.selList"
        :key="index">
          <div class="to_do_container_item_context">{{item.val}}</div>
          <van-button class="to_do_container_item_status"></van-button>
          <div class="to_do_container_item_remove">
            <van-button>删除</van-button>
          </div>
        </div>
      </div>
    </van-dropdown-menu>
    <van-button @click="search">搜索</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: -1,
      option1: [
        { text: '全部代办事件', value: -1 },
        { text: '未完成', value: 0 },
        { text: '已完成', value: 1 },
        { text: '已取消', value: 2 },
      ],
    };
  },
  mounted(){
    console.log(this.$store.state.selList)
  },
  methods:{
    search(){
      this.$store.commit("SEARVH",this.value1)
    }
  }
}
</script>

<style scoped>
.to_do_container
{
  width: 100vw;
}

.to_do_container_item
{
  width: 100%;
  height: 50px;
  border: 1px solid #000;
  display: inline-flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.to_do_container_item_context
{
  width: 60%;
  height: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.to_do_container_item_status
{
  width: 20%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.to_do_container_item_remove
{
  width: 20%;
}
</style>
